<template>
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(page, index) in pages" :key="index">
        <div class="icons">
          <nav class="clearfix">
            <a href="" v-for="item in page" :key="item.id">
              <img :src="item.imgUrl" alt="" />
              <p class="desc">{{ item.desc }}</p>
            </a>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'IconHome',
  props: ['list'],
  data() {
    return {}
  },

  mounted() {
    // eslint-disable-next-line no-unused-vars
    const mySwiper = new Swiper(this.$refs.cur, {
      loop: true
      // 如果需要分页器

      // 如果需要前进后退按钮
    })
  },
  computed: {
    pages() {
      const pages = []
      this.list.forEach((item, index) => {
        const shu = Math.floor(index / 8)
        if (!pages[shu]) {
          pages[shu] = []
        }
        pages[shu].push(item)
      })
      return pages
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.icons {
  height: 4.5867rem;
}
.clearfix {
  display: flex;
  align-items: center;

  flex-wrap: wrap;
}
.clearfix a {
  float: left;
  width: 25%;
  display: block;
  //   flex: 25%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  box-sizing: border-box;  padding: 0.3rem;

}

.clearfix a img {
  width: 44px;
  padding-bottom: 0.2rem;
  box-sizing: border-box;
}
.desc {
  width: 100%;
  color: brown;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
